<template>
  <div class="ratings" ref="ratings">
    <div class="ratings-content">
      <div class="overview">
        <div class="over-left">
          <h1 class="score">{{seller.score}}</h1>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家{{seller.rankRate}}%</div>
        </div>
        <div class="over-right">
          <div class="score-wrapper">
            <span class="title">服务态度：</span>
            <star class="star" :size="36" :score="seller.serviceScore"></star>
            <span class="score">{{seller.score}}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">商品评分：</span>
            <star class="star" :size="36" :score="seller.foodScore"></star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <div class="delivery-wrapper">
            <span class="title">送达时间：</span>
            <span class="delivery">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <split></split>
      <div class="ratings-select">
        <ratingselect @select="ratingSelect" @toggle="toggleContent" :ratings="ratings"
                      :selectType="selectType" :onlyContent="onlyContent"></ratingselect>
      </div>
      <div class="ratings-wrapper">
        <ul>
          <li v-for="rating in ratings" class="rating-item">
              <div class="rating-avatar">
                <img width="28" height="28" :src="rating.avatar" alt="">
              </div>
            <div class="rating-content">
              <div class="name-time">
                <span class="user-name">{{rating.username}}</span>
                <span class="time">{{rating.rateTime | formatDate}}</span>
              </div>
              <div class="star-wrapper">
                <star class="star" :size="24" :score="rating.score"></star>
                <span class="time" v-if="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
              </div>
              <div class="rating-text">
                <p>{{rating.text}}</p>
              </div>
              <div class="recommend" v-show="rating.recommend && rating.recommend.length">
               <!--<span class="icon-thumb_up"></span>-->
                <span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>
                <el-button size="mini" class="item" v-for="item in rating.recommend">{{item}}</el-button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
  import star from '../star/star.vue'
  import ratingselect from '../ratingselect/ratingselect.vue'
  import split  from '../split/split.vue'
  import BScroll from 'better-scroll';
  import {formatDate} from '../../common/js/data'

  const ALL = 2;
  const ERR_OK = 0;

  export default{
    props: {
      seller: {
        type: Object
      }
    },
    components:{
        star,
      ratingselect,
      split
    },
    data() {
      return {
        ratings: [],
        selectType: ALL,
        onlyContent: true
      };
    },
    created(){
        this.$http.get('/api/ratings').then((res)=>{
            res=res.body
          if(res.errno===ERR_OK){
                this.ratings=res.data;
                this.$nextTick(()=>{
                    this.scroll=new BScroll(this.$refs.ratings,{
                        click:true
                    })
                })

          }
        })
    },
    methods:{
      ratingSelect(type){
          this.selectType=type
      },
      toggleContent(){
        this.onlyContent=!this.onlyContent;
      }
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
  }

</script>

<style lang="scss">
  .ratings {
    position: absolute;
    width: 100%;
    top: 176px;
    left: 0;
    bottom: 0;
    overflow: hidden;
    .ratings-content{
      .overview{
        display: flex;
        padding:18px 0;

        .over-left{
          flex: 0 0 138px;
          width: 138px;
          border-right: 1px solid rgba(7, 17, 27, 0.1);
          text-align: center;
          @media only screen and (max-width: 320px){
                flex: 0 0 90px;
               width: 90px;
          }

          .score{
            font-size: 24px;
            color: rgb(255,153,0);
            line-height: 28px;
          }
          .title{
            font-size: 12px;
            color: rgb(7,17,27);
            line-height: 12px;
            margin:6px 0 8px 0;
          }
          .rank{
            font-size: 10px;
            color: rgb(7,17,27);
            line-height: 10px;
          }
        }
        .over-right{
          flex:1;
          padding: 6px 6px 6px 24px;
          white-space: nowrap;
           @media only screen and (max-width: 320px){
             padding-left: 6px;
           }
          .score-wrapper{
                margin-bottom: 8px;
                  font-size: 0;
            .title{
              display: inline-block;
              font-size: 12px;
              line-height: 18px;
              color: rgb(7,17,27);
              vertical-align: top;
            }
            .star{
              display: inline-block;
              vertical-align: top;
              margin: 0 12px
            }
            .score{
              display: inline-block;
              font-size: 12px;
              color: rgb(255,153,0);
              line-height: 18px;
            }
          }
          .delivery-wrapper{
            font-size:0;

            .title{
              display: inline-block;
              font-size: 12px;
              line-height: 18px;
              color: rgb(7,17,27);
            }
            .delivery{
              font-size: 12px;
              line-height: 18px;
              color: rgb(147,153,159);
              margin-left: 12px;
            }
          }

        }
      }
      .ratings-select{
        padding: 18px;
      }
      .ratings-wrapper{

      .rating-item{
          display: flex;
          margin:0 18px;
        padding:18px 0 ;
          border-bottom:1px solid rgba(7,17,27,.1);

          .rating-avatar{
            flex: 0 0 28px;
            width: 28px;
            margin-right: 12px;

            img{
              border-radius: 50%;
            }
          }
          .rating-content{
            flex:1;
            .name-time{
              .user-name{
                font-size: 10px;
                color: rgb(7,17,27);
                line-height: 12px;
              }
              .time{
                float: right;
                font-size: 10px;
                font-weight: 200;
                color: rgb(147,153,159);
                line-height: 12px;
              }
            }
            .star-wrapper{
              font-size:0;
              margin-bottom:6px;
               margin-top:4px;
              .star{
                display: inline-block;
                margin-top: 0;
              }
              .time{
                margin-left: 6px;
                font-size: 10px;
                font-weight: 200;
                color: rgb(147,153,159);
                line-height: 12px;
              }


            }
          .rating-text{
            font-size:12px;
            color: rgb(7,17,27);
            line-height: 16px;
          }
           .recommend{
             margin-top: 6px;
             .item{
               margin-bottom: 4px;
             }
             .icon-thumb_up{
               color: rgb(0, 160, 220);
             }
              .icon-thumb_down{
                color: rgb(147, 153, 159);
              }
           }


          }

        }


      }
    }

  }

</style>
